<template>
<div>
<div>
    <div class="mor"><img src="../../../assets/xzlpic/ic_data_day.png"/>07:50</div>
    <div class="mar"><span>99</span>分</div>
    <ul>
        <li v-for='(item,index) in xulist' :key='index'>
            <div class="lidiv">
            <img :src='item.src'/>
                {{item.name}}
                <h6>{{item.tnum}}</h6>
            </div>
        </li>
    </ul>
</div>
<div class="nigdiv">
     <hr/>
    <div class="nig"><img src="../../../assets/xzlpic/ic_data_night.png"/>21:33</div>
    <div class="nigmar"><span>96</span>分</div>
    <ul>
        <li v-for='(item,index) in xulist' :key='index'>
            <div class="lidiv">
            <img :src='item.src'/>
                {{item.name}}
                <h6>{{item.tnum1}}</h6>
            </div>
        </li>
    </ul>
</div>
</div>
</template>

<script>
export default {
data () {
    return {
        xulist:[]
    }
},
created () { 
     this.$http.get('/api/users/xu').then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data);
                    this.xulist=data.data
                })
},
components: {

}
}
</script>

<style scoped>
.mor{
    position: absolute;
    margin: 20px;
}
.mor > img{
    width: 20%;
}
.mar{
    text-align: center;
    line-height: 3rem;
}
span{
    font-size: 1rem;
}
ul{
    position:absolute;
    margin-top: -1rem;
}
li{
    list-style: none;
    display: inline-block;
    width: 40%;
    margin: 5%;
}
.lidiv > img{
    float: left;
    width: 25%;
}
.nigdiv{
    margin-top: 2.5rem;
}
.nig{
    position: absolute;
    margin: 20px;
}
.nig > img{
    width: 20%;
}
.nigmar{
    text-align: center;
    line-height: 3rem;
}
</style>